<template>
    <div class="legend-wrap" v-show="legendShow">
        <div class="legend-title">图例</div>
        <div class="legend_box">
            <div>HIGH</div>
            <div class="max-value">{{ max }}</div>
            <div class="value-wrap">
                <template v-for="(item, index) in gradientreverse">
                    <span
                        @mouseover="e => getValue(e, item)"
                        @mouseout="e => hideValue(e, item)"
                        :key="index"
                        class="legend-content"
                        :style="{
                            backgroundColor: item.color,
                            height: spanHeight + 'px',
                        }"
                    ></span>
                </template>
            </div>
            <div id="mouse" class="value-content"></div>
            <div class="min-value">{{ min }}</div>
            <div>LOW</div>
        </div>
    </div>
</template>
<script>
import GradientLegend from './gradientLegend';
export default {
    name: 'legendPanel',
    components: {},
    computed: {
        gradientreverse() {
            return this.gradient.slice().reverse();
        },
    },
    data() {
        return {
            gradientLegend: null,
            gradient: [],
            max: '',
            min: '',
            legendShow: false,
            spanHeight: 1,
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.gradientLegend = new GradientLegend();
        });
    },
    methods: {
        // 获取所有渐变色的数组
        changeLegend(param) {
            this.max = param.max;
            this.min = param.min;
            param.step = param.max - param.min + 1;
            this.gradient = this.gradientLegend.gradientColor(param);
            if (this.gradient.length < 100) {
                this.spanHeight = 100 / this.gradient.length;
            }
            this.legendShow = true;
        },
        // 获取图例对应的值
        getValue(e, item) {
            let showDiv = document.getElementById('mouse');
            showDiv.style.top = parseInt(e.layerY + 6, 0) + 'px';
            showDiv.style.display = 'block';
            showDiv.innerHTML = `≈${item.value}`;
        },
        // 隐藏值
        hideValue() {
            let showDiv = document.getElementById('mouse');
            showDiv.style.display = 'none';
            showDiv.innerHTML = '';
        },
    },
};
</script>
<style lang="scss" scope>
.legend-wrap {
    display: flex;
    position: absolute;
    width: 80px;
    bottom: 0;
    right: 10%;
    .legend-title {
        margin: auto;
    }
    .legend_box {
        width: 50px;
        position: relative;
        .value-content {
            position: absolute;
            left: 50px;
        }
        .min-value {
            position: absolute;
            left: -10px;
            bottom: 8px;
        }
        .max-value {
            position: absolute;
            left: -25px;
            top: 4px;
        }
        .value-wrap {
            height: 100px;
            overflow: hidden;
            .legend-content {
                cursor: pointer;
                display: block;
                height: 1px;
                width: 100%;
            }
        }
    }
}
</style>
